<template>
  <div v-show="defaultData.tipStatus" class="tooltip">
    <div class="box">{{ defaultData.tipContent }}</div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      defaultData: {
        tipContent: '提示信息',
        tipStatus: false,
        timer: 2000
      }
    }
  },
  methods: {
    showToolTips(data, timer) {
      const obj = {}
      if (timer) {
        obj.timer = timer
      }
      const timers = Object.assign({}, this.defaultData, obj)
      this.defaultData = {
        tipContent: data,
        tipStatus: true
      }
      setTimeout(() => {
        this.defaultData = {
          tipStatus: false
        }
      }, timers.timer)
    }
  }
}
</script>

<style scoped lang="scss">
  .tooltip{
    text-align: center;
    position: fixed;
    top: 40vh;
    width: 100%;
    .box{
      display: inline-block;
      font-size: 12px;
      line-height: 22px;
      padding: 4px 8px;
      color: #fff;
      border-radius: 2px;
      background-color: #616161;
      opacity: .9;
    }
  }
</style>
